<template>
  <div class="wrapper">
    <div class="bg">
      <img v-if="diaryUrl" :src="diaryUrl" alt="" srcset="" />
    </div>
    <Blank>
      <div class="wrap-content" v-if="diaryList.length > 0">
        <h3>{{ diaryList[0].name }}</h3>
        <div class="title">副标题：{{ diaryList[0].title }}</div>
        <div class="author">作者：{{ diaryList[0].author }}</div>
        <div class="time">发布时间：{{ diaryList[0].createTime }}</div>
        <p v-html="diaryList[0].content"></p>
      </div>
    </Blank>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import Blank from "@/components/blankCard/BlankCard.vue";
import { useRoute } from "vue-router";
import { getDiaryList } from "@/api/index";

const route = useRoute();
const diaryList = ref([]);
const diaryUrl = localStorage.getItem("diaryUrl");
const timestampToTime = (timestamp) => {
  if (timestamp === 0 || timestamp == null) {
    return "";
  } else {
    var date = new Date(timestamp);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D =
      date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
    var H = date.getHours() + ":";
    var M2 =
      (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
      ":";
    var S =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return Y + M + D + H + M2 + S;
  }
};
const initData = async () => {
  const res = await getDiaryList(route.params.id);
  if (res) {
    res[0].createTime = timestampToTime(Number(res[0].createTime));
    diaryList.value = res;
  }
};
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #f3f3f3;
  .bg {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .wrap-content {
    padding: 20px 0 40px;
    h3,
    .title,
    .author,
    .time {
      margin: 10px 0;
    }
    .title {
      font-size: 14px;
      line-height: 25px;
      font-weight: 600;
    }
    .author,
    .time {
      font-size: 14px;
      line-height: 25px;
    }
    p {
      margin-top: 20px;
    }
  }
}
</style>